<template>
  <div class="user-form-container">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span>用户信息表单</span>
        </div>
      </template>

      <el-form
          :model="form"
          :rules="rules"
          ref="formRef"
          label-width="120px"
          label-position="left"
      >
        <!-- 头像上传 -->
        <el-form-item label="用户头像">
          <div class="avatar-uploader">
            <el-avatar :size="100" :src="form.avatar" class="avatar" />
            <el-upload
                class="avatar-upload"
                action="#"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleAvatarChange"
            >
              <el-button type="primary" size="small">选择头像</el-button>
            </el-upload>
          </div>
        </el-form-item>

        <!-- 账号输入 -->
        <el-form-item label="账号" prop="username">
          <el-input
              v-model="form.username"
              placeholder="请输入账号"
              clearable
              style="width: 300px"
          />
        </el-form-item>

        <!-- 邮箱输入 -->
        <el-form-item label="邮箱" prop="email">
          <el-input
              v-model="form.email"
              placeholder="请输入邮箱"
              clearable
              style="width: 300px"
          />
        </el-form-item>

        <!-- 性别选择 -->
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
            <el-radio label="other">其他</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 用途类型选择 -->
        <el-form-item label="用途类型" prop="purpose">
          <el-select
              v-model="form.purpose"
              placeholder="请选择用途类型"
              style="width: 300px"
          >
            <el-option label="个人使用" value="personal" />
            <el-option label="商业使用" value="business" />
            <el-option label="教育用途" value="education" />
            <el-option label="其他用途" value="other" />
          </el-select>
        </el-form-item>

        <!-- 权限选择 -->
        <el-form-item label="权限" prop="role">
          <el-select
              v-model="form.role"
              placeholder="请选择权限"
              style="width: 300px"
          >
            <el-option label="普通用户" value="user" />
            <el-option label="管理员" value="admin" />
            <el-option label="超级管理员" value="superadmin" />
            <el-option label="访客" value="guest" />
          </el-select>
        </el-form-item>

        <!-- 新密码输入 -->
        <el-form-item label="新密码" prop="password">
          <div class="password-input">
            <el-input
                v-model="form.password"
                placeholder="请输入新密码"
                show-password
                style="width: 200px"
                @input="handlePasswordInput"
            />
            <el-button
                type="primary"
                :disabled="isCountingDown || !form.password"
                @click="sendVerificationCode"
                style="margin-left: 10px"
            >
              {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
            </el-button>
          </div>
        </el-form-item>

        <!-- 验证码输入框 -->
        <el-form-item label="验证码" prop="verificationCode" v-if="showVerificationCode">
          <el-input
              v-model="form.verificationCode"
              placeholder="请输入验证码"
              style="width: 300px"
              clearable
          />
        </el-form-item>

        <!-- 按钮区域 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 表单数据
const form = reactive({
  avatar: '',
  username: '',
  email: '',
  gender: 'male',
  purpose: '',
  role: '',
  password: '',
  verificationCode: ''
})

// 表单验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 16, message: '长度在4到16个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  purpose: [
    { required: true, message: '请选择用途类型', trigger: 'change' }
  ],
  role: [
    { required: true, message: '请选择权限', trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 6, message: '验证码长度为4-6位', trigger: 'blur' }
  ]
})

// 表单引用
const formRef = ref(null)

// 验证码倒计时
const countdown = ref(0)
const isCountingDown = ref(false)
const showVerificationCode = ref(false)

// 处理头像选择
const handleAvatarChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    form.avatar = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

// 处理密码输入
const handlePasswordInput = () => {
  // 当密码变化时清空验证码
  form.verificationCode = ''
  showVerificationCode.value = false
}

// 发送验证码
const sendVerificationCode = () => {
  if (!form.password) {
    ElMessage.warning('请先输入密码')
    return
  }

  // 这里可以添加发送验证码的逻辑
  console.log('发送验证码到:', form.email)
  ElMessage.success('验证码已发送')

  // 显示验证码输入框
  showVerificationCode.value = true

  // 开始倒计时
  countdown.value = 60
  isCountingDown.value = true

  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isCountingDown.value = false
    }
  }, 1000)
}

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单提交:', form)
      // 这里可以添加提交表单的逻辑
      ElMessage.success('提交成功')
    } else {
      ElMessage.error('请填写完整信息')
      return false
    }
  })
}

// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
  form.avatar = ''
  showVerificationCode.value = false
  countdown.value = 0
  isCountingDown.value = false
}
</script>

<style scoped>
.user-form-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #e6f7ff; /* 浅蓝色背景 */
}

.form-card {
  width: 800px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.avatar-uploader {
  display: flex;
  align-items: center;
  gap: 20px;
}

.password-input {
  display: flex;
  align-items: center;
}

.el-form-item {
  margin-bottom: 22px;
}
</style>